<template>
    <div class="pop">
        <!-- 弹窗 -->
        <div class="box-bg" :style="`z-index:${props.bgIndex}`">
            <!-- 背景色 -->
        </div>
        <div class="pop-box" :style="`z-index:${props.boxIndex}`">
            <div class="pop-content" :style="{ 'width': widthMy, 'height': heightMy }">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
let props = defineProps({
    widthMy: {
        type: String,
        default: '1000px',
    },
    heightMy: {
        type: String,
        default: '800px',
    },
    bgIndex: {
        type: Number,
        default: 110,
    },
    boxIndex: {
        type: Number,
        default: 110,
    },
})



const mo = function (e) {
    e.preventDefault();
};

//禁止滚动-在显示遮罩层的时候调用
function stop() {
    document.body.style.overflow = 'hidden';
    document.addEventListener("touchmove", mo, false);
}

// 取消滑动限制-在关闭遮罩层的时候调用
function move() {
    document.body.style.overflow = '';//出现滚动条
    document.removeEventListener("touchmove", mo, false);
}
onMounted(() => {
    stop()
})
onUnmounted(() => {
    move()
})
</script>
<style scoped lang='scss'>
.box-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.12;
}

.pop-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;


    .pop-content {
        background: #fff;
        border-radius: 4px;
        max-height: 1800px;
        overflow-y: scroll;
    }
}
</style>
